<template>
  <div class="left-bottom" id="left-bottom"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "LeftBottom",
  props: {
    employeeDealCount: {
      type: Array,
      default: () => []
    },
    memberDealCount: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    const dom = document.querySelector("#left-bottom");
    const myChart = echarts.init(dom);
    const x_datas = [];
    const employeeDealCount = this.employeeDealCount;
    const memberDealCount = this.memberDealCount;
    for (let i = 1; i <= 12; i++) {
      x_datas.push(`${i}月`);
    }
    const option = {
      title: {
        text: `柜员和员工月交易数量`,
        textStyle: {
          color: "#fff",
          fontSize: 12
        },
        left: "50%",
        top: 10,
        textAlign: "center"
      },
      tooltip: {
        show: true
      },
      legend: {
        orient: "vertical",
        show: true,
        type: "plain",
        data: ["柜员交易数量", "员工交易数量"],
        right: 2,
        textStyle: {
          color: "#fff"
        }
      },
      xAxis: {
        type: "category",
        data: x_datas,
        axisTick: {
          show: false
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: 9
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        }
      },
      yAxis: {
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#fff"
          }
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
            fontSize: "55%"
          }
        }
      },
      series: [
        {
          name: "柜员交易数量",
          type: "bar",
          data: employeeDealCount,
          barWidth: 8,
          itemStyle: {
            color: "#c1352c"
          }
        },
        {
          name: "员工交易数量",
          type: "bar",
          data: memberDealCount,
          barWidth: 8,
          itemStyle: {
            color: "#2d4253"
          }
        }
      ]
    };
    myChart.setOption(option);
  }
};
</script>

<style scoped lang="less">
.left-bottom {
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 32.8vh;
  overflow: hidden;
}
</style>
